import React from 'react'
import {Row,Col,Form, Input, Select, Button} from 'antd'
import axios from '../../../components/Engineering/axios'

const {Option} = Select
const {Item: FormItem} = Form;

export default class PriceInput extends React.Component {
  //todo kim-stamp 高端用法 从props获取派生状态 应该是受控组件,getDerivedStateFromProps的存在只有一个目的。它使组件能够根据changes in props的结果更新其内部状态
  //相当于从this.props获取值，再把值设置到到子组件的state中去，重新渲染，如果不这样操作，父组件虽然可以接受到子组件的值，但不会显示出输入的值
  static getDerivedStateFromProps(nextProps) {
    // console.log(nextProps, "  static getDerivedStateFromProps (nextProps) {")
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {})
      }
    }
    return null
  }

  componentDidMount() {
    axios.ajax({url: `/provinces`}).then(res => {
      res.content &&
      this.setState({
          provinceList: res.content,
        }, () => {
          console.log(this.state.provinceList, '打印省市的名字')
        },
      )
    })
  }
  //shouldComponentUpdate(nextProps, nextState)


  
  // //b.在componentWillReceiveProps方法中，将props转换成自己的state
  // //在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染。
  // componentWillReceiveProps(nextProps){  //todo 父组件重传props时就会调用这个方法
  //   console.log(nextProps,"componentWillReceiveProps(prevProps,nextProps){")
  //   if ('value' in nextProps) {
  //     return {
  //       ...(nextProps.value || {})
  //     }
  //   }
  //   return null
  // }


  constructor(props) {
    super(props)
    const value = props.value || {}
    this.state = {
      // number: value.number || this.props.number,
      // currency: value.currency || 'rmb',
        provinceList: [],
        citysList: [],
        districtList: [],
        streetsList: [],
        province: '',
        city: '',
        district: '',
        street: '',
    }
  }

  // handleNumberChange = e => {
  //   const number = parseInt(e.target.value || 0, 10)
  //   if (isNaN(number)) return;

  //   if (!('value' in this.props)) {
  //     this.setState({number})
  //   }
  //   this.triggerChange({number})
  // }

  // handleCurrencyChange = currency => {
  //   if (!('value' in this.props)) {
  //     this.setState({currency})
  //   }
  //   this.triggerChange({currency})
  // }

  triggerChange = changedValue => {
    // 触发父组件得一个事件,把将值传递给父组件
    const {onChange} = this.props
    if (onChange) {
      onChange({
        ...this.state,
        ...changedValue
      })
    }
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},

      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      }
    }
    const {size} = this.props
    
    return (
      <span>
              <>
                  {/* <Row type="flex" gutter={16}> */}
                    {/* <Col xs={24} md={8}> */}
                      <Select
                        showSearch
                        placeholder=""
                        value={this.state.province}
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                          0
                        }
                        onChange={(value, option) => {
                          this.setState({
                            province: value,
                            city: '',
                            district: '',
                            street: '',
                            streetsList: [],
                          });
                          this.triggerChange({province: value,citysList:res.content});
                          axios
                            .ajax({
                              url: `/citys`,
                              params: {provinceCode: value},
                            })
                            .then(res => {
                              res.content &&
                              this.setState({
                                citysList: res.content,
                              });
                            });
                        }}
                      >
                        {this.state.provinceList.map(item => (
                          <Option value={item.proviceCode}>{item.provinceName}</Option>
                        ))}
                      </Select>
                    {/* </Col> */}

                    {/* <Col xs={24} md={8}> */}
                      <Select
                        showSearch
                        value={this.state.city}
                        placeholder=""
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                          0
                        }
                        onChange={(value, option) => {
                          this.setState({
                            city: value,
                            district: '',
                            street: '',
                          });
                          axios
                            .ajax({
                              url: `/districts?cityCode=${value}`,
                            })
                            .then(res => {
                              res.content &&
                              this.setState({
                                districtList: res.content,
                              });
                            });
                        }}
                      >
                        {this.state.citysList.map(item => (
                          <Option value={item.cityCode}>{item.cityName}</Option>
                        ))}
                      </Select>
                    {/* </Col> */}

                    {/* <Col xs={24} md={8}> */}
                      <Select
                        showSearch
                        value={this.state.district}
                        placeholder=""
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                          0
                        }
                        onChange={(value, option) => {
                          this.setState({district: value, street: ''});
                          axios
                            .ajax({
                              url: `/streets/${value}?districtCode=${value}`,
                            })
                            .then(res => {
                              res.content &&
                              this.setState({
                                streetsList: res.content,
                              });
                            });
                        }}
                      >
                        {this.state.districtList.map(item => (
                          <Option value={item.districtCode}>{item.districtName}</Option>
                        ))}
                      </Select>
                    {/* </Col> */}

                    {this.state.streetsList.length > 0 ? (
                      // <Col xs={24} md={8}>
                        <Select
                          showSearch
                          value={this.state.street}
                          placeholder=""
                          optionFilterProp="children"
                          filterOption={(input, option) =>
                            option.props.children
                              .toLowerCase()
                              .indexOf(input.toLowerCase()) >= 0
                          }
                          onChange={(value, option) => {
                            this.setState({street: value});
                          }}
                        >
                          {this.state.streetsList.map(item => (
                            <Option value={item.streetsCode}>{item.streetsName}</Option>
                          ))}
                        </Select>
                      // </Col>
                    ) : null}
                  {/* </Row> */}
              </>


      </span>
    )
  }
}
